import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface FunnelProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    tooltip?: object;
    legend?: string[];
    sort?: string;
    seriesData?: {value: number, name: string}[];
}

@customElement('lit-funnel')
export class LitFunnel extends LitElement {
    @property({type: String}) chartId: string = 'lit-funnel-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = {};
    @property({type: Object}) tooltip: object = {};
    @property({type: Object}) legend: string[] = [];
    @property({type: String}) sort: any = 'descending';
    @property({type: Array}) seriesData: {value: number, name: string}[] = []

    option: echarts.EChartsOption = {
        title: this.title,
        tooltip: this.tooltip,
        toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: this.legend,
        },
        series: [
            {
                name: 'Funnel',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                minSize: '0%',
                maxSize: '100%',
                sort: this.sort,
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: this.seriesData
            }
        ]
    };

    static styles = style;

    updated(): void {
        this.option.title = this.title;
        this.option.tooltip = this.tooltip;
        this.option.legend = {data: this.legend};
        (this.option.series as any)[0].sort = this.sort;
        (this.option.series as any)[0].data = this.seriesData;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-funnel': LitFunnel;
    }
}